<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <style>
    	*{
    		margin: 0px;
    		padding: 0px;
    	}
    	.box{
    		position: relative;
    		width: 600px;
    		margin: 10px auto;
    	}
    	.fatie{
    		width: 220px;
    		background-color: #009966;
    		border-radius: 8px;
    		text-align: center;
    		line-height: 50px;
    		color: white;
    		font-size: 20px;
    		font-weight: bold;
    		cursor: pointer;
    	}
    	.xian{
    		margin-top: 6px;
    		border-bottom: 1px solid #cecece;
    	}
    	.sline{
    		border: 1px solid #cecece;
    	}
    	.cnt_1{
    		position: absolute;
    		z-index: 999;
    		left: 78px;
    		background: white;
    		margin-top: 10px;
    		padding: 10px;
    		display: none;
    	}
    	#tou{
    		width: 500px;
    		height: 30px;
    		line-height: 30px;
    		margin-bottom: 10px;
    	}
    	input{
    		outline: none;
    	}
    	::placeholder{
    		color:#ccc;
    	}
    	select{
    		margin-left: 6px;
    		height: 24px;
    	}
    	textarea{
    		margin: 10px 0px;
    		outline: none;
    	}
    	.fabu{
    		width: 180px;
    		background-color: #009966;
    		border-radius: 8px;
    		text-align: center;
    		line-height: 40px;
    		color: white;
    		font-size: 20px;
    		cursor: pointer;
    	}
    	.img img{
    		width: 60px;
    		border-radius:50% ;
    		margin-right: 12px;
    	}
    	.fl{
    		float:left;
    	}
    	.fr{
    		float:right;
    	}
    	.clearfix{
    		display: table;
    		content: "";
    		clear: both;
    	}
    	.biaoti{
    		font-weight: bold;
    		margin-top: 6px;
    	}
    	.bankuai{
    		color: #666;
    		line-height: 34px;
    	}
    	.cnt{
    		margin-top: 10px;
    		display: none;
    	}
    	.new{
    		margin-right: 16px;
    	}
    </style>
</head>
<body>
	<div class="box" id="box">
		<div class="fatie" id="fa1">
		    我要发帖
		</div>
		<div class="xian">	
		</div>
		<div class="cnt_1 sline" id="cnt_1">
			<input placeholder="请输入标题（1-50个字符）" class="sline" id="tou"/>
			<div>
				所属版块:<select class="kecheng">
					<option>请选择版块</option>
					<option value="新课来了">新课来了</option>
					<option value="新手报到">新手报到</option>
					<option value="电子书籍">电子书籍</option>
					<option value="职业规划">职业规划</option>
				</select>
			</div>
			<textarea cols="69" rows="12" id="wenben"></textarea>
			<div class="fabu" id="fa2">发布</div>
		</div>
		<div class="clearfix cnt" id="cnt">
			<div class="img fl" >
				<img  src="images/tou01.jpg" id="pic"/>
			</div>
			<div class="text fl">
				<div  class="biaoti">如何学习Web前端开发课程</div>
				<div class="bankuai">版块：<span class="new">新课来了 </span>发表时间：<span class="fabutime">2018-1-6 20:20</span></div>
			</div>
		</div>
	</div>
	<script>
		var oldcnt;
		var fa1=document.getElementById("fa1");
		fa1.onclick=function(){
			cnt_1.style.display="block";
		
			var dizhi=["tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg"];
			var pics=document.getElementById("pic");
			pics.src="images/"+dizhi[Math.floor(Math.random()*dizhi.length)];
			
			var fa2=document.getElementById("fa2");
			fa2.onclick=function(){
			cnt_1.style.display="none";
			var biaoti=document.getElementsByClassName("biaoti")[0]
			biaoti.innerHTML=tou.value;
			tou.value="";
		
			var kecheng=document.getElementsByClassName("kecheng")[0];
			var ke=document.getElementsByClassName("new")[0];
			ke.innerHTML=kecheng.value;
			kecheng.value="请选择版块";
			
			var wenben=document.getElementById("wenben");
			wenben.value="";
			
			var now=new Date();
			var y=now.getFullYear();
			var m=now.getMonth()+1;
			var d=now.getDate();
			var h=now.getHours();
			h=h<10?"0"+h:h;
			var f=now.getMinutes();
			f=f<10?"0"+f:f;
			var shijian=document.getElementsByClassName("fabutime")[0];
			shijian.innerHTML=y+"-"+m+"-"+d+" "+h+":"+f;
			
			var cnt1=cnt.cloneNode(true);
			cnt1.id="";
			cnt1.style.display="block";
			
			if(document.getElementsByClassName("cnt").length>1){
				box.insertBefore(cnt1,oldcnt);
			}else{
				box.appendChild(cnt1);
			};
			oldcnt=cnt1;
		};
		
		};
		
	</script>
</body>
</html>